<template>
  <view class="">
    <view class="" v-if="datalist.length > 0">
      <template v-if="oneTab === 0 || oneTab === 2">
        <view
          class="listWrap"
          v-for="(it, index) in datalist"
          :key="index"
          @click="goCarOrderDetail(it)"
        >
          <view class="flex flex-jc-sb pad-t-b-10 border-bottom-1">
            <view class="flex width-67">
              <view class="headImg"
                ><image :src="it.headportrait" mode=""></image
              ></view>
              <view class="block-inline title">
                <text v-if="oneTab === 0">{{ it.nickname }}</text>
                <text v-else>{{ it.truename }}</text>
                <i-icon
                  icon="iconfanhui"
                  class="scale"
                  type="single"
                  size="28rpx"
                  color="#666"
                ></i-icon>
              </view>
            </view>
            <view
              class="width-33 u-text-right color-EB5B01"
              v-if="oneTab === 0"
              >{{ RetailStatusList[tab][it.status] }}</view
            >
            <!-- <view class=" width-30 u-text-right color-EB5B01" v-else-if="oneTab===1 || oneTab===2">{{ returnLowPayStatus(it.status)}}</view> -->
            <view
              class="width-33 u-text-right color-EB5B01"
              v-else-if="oneTab === 2"
              >{{ returnLowPayStatus(it.status) }}</view
            >
          </view>
          <view class="pad-t-b-10 border-bottom-1">
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb flex width-20 color-999">
                <view class="carImg">
                  <image
                    v-if="oneTab === 0"
                    :src="
                      'https://files.yzsheng.com/goodimg/brandimg/' +
                      it.brand_id +
                      '.png'
                    "
                    mode="widthFix"
                  ></image>
                  <image
                    v-else-if="oneTab === 2"
                    :src="it.brand_img"
                    mode="widthFix"
                  ></image>
                </view>
                <view class="mr-13">车型:</view>
              </view>
              <view class="flex-jc-sb width-80 flex">
                <view class="flex-jc-sb color-333 font-28"
                  >{{ it.car_type_name }} {{ it.configuration_name }}</view
                >
              </view>
            </view>
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb width-20 color-999">外观内饰:</view>
              <view class="flex-jc-sb width-80 color-333">
                <template v-if="oneTab === 0 && it.colour.outerColour.color">
                  <view
                    :style="{ background: it.colour.outerColour.colorCoding }"
                    class="iconcolor"
                  ></view>
                  {{ it.colour.outerColour.color }} /{{
                    it.colour.inColour.color
                  }}

                  <view
                    v-if="
                      it.colour.inColour.neiColor &&
                      it.colour.inColour.neiColor.length == 1
                    "
                    :style="{ background: it.colour.inColour.colorCoding }"
                    class="iconcolor"
                  ></view>
                  <view v-else class="iconcolor"
                    ><view
                      class="iconcolor2"
                      v-for="(it, i) in it.colour.inColour.colorCoding.split(
                        '/'
                      )"
                      :key="i"
                      :style="{ background: it }"
                    ></view>
                  </view>
                </template>
                <template v-if="oneTab === 2 && it.colour.outerColour[0].color">
                  <view
                    :style="{
                      background: it.colour.outerColour[0].colorCoding,
                    }"
                    class="iconcolor"
                  ></view>
                  {{ it.colour.outerColour[0].color }} /{{
                    it.colour.inColour[0].color
                  }}
                  <view
                    v-if="
                      it.colour.inColour[0].colorCoding.split('/').length == 1
                    "
                    :style="{ background: it.colour.inColour[0].colorCoding }"
                    class="iconcolor"
                  ></view>
                  <view v-else class="iconcolor"
                    ><view
                      class="iconcolor2"
                      v-for="(
                        it1, i
                      ) in it.colour.inColour[0].colorCoding.split('/')"
                      :key="i"
                      :style="{ background: it1 }"
                    ></view>
                  </view>
                </template>
                <template v-else>
                  <view>不限</view>
                </template>
              </view>
            </view>
            <view class="flex pad-t-b-10 font-26" v-if="oneTab === 0">
              <view class="flex-jc-sb width-20 color-999">预约时间:</view>
              <view class="flex-jc-sb width-80 flex">
                <view class="flex-jc-sb width-100 color-333">{{
                  it.book_time
                }}</view>
              </view>
            </view>
            <view
              class="flex pad-t-b-10 font-26"
              v-if="oneTab === 2 && it.status === 0 && lastTab === 1"
            >
              <view class="flex-jc-sb width-20 color-999"
                ><text class="color-999">报价：</text></view
              >
              <view class="flex-jc-sb width-20">
                <text class="font24 color-EB5C02">{{ it.quoted_price }}万</text>
              </view>
              <view class="flex-jc-sb width-60">
                <text class="font24 color-999 mr-10">{{ it.sell_name }}</text>
                <text>{{ it.addtime }}</text>
              </view>
            </view>
          </view>

          <!-- 报价订单-->
          <!-- 待付款   待收货  询价订单待确认-->
          <view class="" v-if="listType === 'msg'">
            <view class="mt-10 u-text-right"
              ><button @click="contactSeller(it, 0)" class="btn-bg-yellow">
                发送
              </button></view
            >
          </view>
          <view class="" v-else>
            <!-- 预约单 -->
            <view class="" v-if="oneTab === 0">
              <!-- 待到店  -->
              <!-- 已到店 -->
              <view
                class="flex mt-5 flex-jc-fe"
                v-if="it.status === 1 || it.status === 2"
              >
                <view class="flex-jc-sb width-30 flex">
                  <view class="flex-jc-sb icon-btn" @click.stop="call(it)"
                    ><i-icon
                      icon="icondianhua"
                      type="multiple"
                      class="middle"
                      size="34rpx"
                    ></i-icon
                  ></view>
                  <view
                    class="flex-jc-sb icon-btn"
                    @click.stop="contactSeller(it, 0)"
                    ><i-icon
                      icon="iconxiaoxi1"
                      type="multiple"
                      class="middle"
                      size="34rpx"
                    ></i-icon
                  ></view>
                </view>
                <view
                  class="flex-jc-sb width-70 u-text-right pad-t-b-10"
                  v-show="it.status === 1"
                >
                  <button class="btn-bg-yellow bgd0">取消预约</button>
                  <button
                    class="btn-bg-yellow"
                    @click="$u.throttle(goCarOrderDetail(it), 1000)"
                  >
                    确认到店
                  </button>
                </view>
                <view
                  class="flex-jc-sb width-70 u-text-right pad-t-b-10"
                  v-show="it.status === 2"
                >
                  <button class="btn-bg-yellow bgd0">未成交</button>
                  <button
                    class="btn-bg-yellow"
                    @click="$u.throttle(goCarOrderDetail(it), 1000)"
                  >
                    成交
                  </button>
                </view>
              </view>

              <view class="flex mt-5" v-else>
                <view class="flex-jc-sb width-40 line40 font-24"></view>
                <view class="flex-jc-sb flex pad-t-b-10 u-text-right">
                  <view
                    class="btn-bg-yellow"
                    @click.stop="contactSeller(it, 0)"
                  >
                    <i-icon
                      icon="iconxiaoxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    联系买家
                  </view>
                  <button class="btn-bg-yellow" @click.stop="call(it)">
                    <i-icon
                      icon="iconlianxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    致电买家
                  </button>
                </view>
              </view>
            </view>
            <view v-if="oneTab === 2">
              <view class="flex mt-5" v-if="it.status === 0 || it.status === 1">
                <view class="flex-jc-sb width-50 flex">
                  <view class="flex-jc-sb icon-btn" @click.stop="call(it)"
                    ><i-icon
                      icon="icondianhua"
                      type="multiple"
                      class="middle"
                      size="34rpx"
                    ></i-icon
                  ></view>
                  <view
                    class="flex-jc-sb icon-btn"
                    @click.stop="contactSeller(it, 3)"
                    ><i-icon
                      icon="iconxiaoxi1"
                      type="multiple"
                      class="middle"
                      size="34rpx"
                    ></i-icon
                  ></view>
                </view>
                <view class="flex-jc-sb width-50 u-text-right pad-t-b-10">
                  <button class="btn-bg-yellow" v-if="it.status === 0">
                    报价
                  </button>
                  <button class="btn-bg-yellow" v-else-if="it.status === 1">
                    再报价
                  </button>
                </view>
              </view>
              <view class="flex flex-jc-fe pad-t-b-10 u-text-right" v-else>
                <view class="btn-bg-yellow" @click.stop="contactSeller(it, 3)">
                  <i-icon
                    icon="iconxiaoxi"
                    type="single"
                    class="middle"
                    size="32rpx"
                    color="#333"
                  ></i-icon>
                  联系买家
                </view>
                <button class="btn-bg-yellow" @click.stop="call(it)">
                  <i-icon
                    icon="iconlianxi"
                    type="single"
                    class="middle"
                    size="32rpx"
                    color="#333"
                  ></i-icon>
                  致电买家
                </button>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="oneTab === 1">
        <view
          class="listWrap"
          v-for="(it, index) in datalist"
          :key="index"
          @click="goCarOrderDetail(it)"
        >
          <view class="flex flex-jc-sb pad-t-b-10 border-bottom-1">
            <view class="flex width-67">
              <view class="headImg"
                ><image :src="it.headPortrait" mode=""></image
              ></view>
              <view class="block-inline title">
                <text>{{ it.trueName }}</text>
                <i-icon
                  icon="iconfanhui"
                  class="scale"
                  type="single"
                  size="28rpx"
                  color="#666"
                ></i-icon>
              </view>
            </view>
            <view class="width-33 u-text-right color-EB5B01">{{
              returnLowPayStatus(it.status)
            }}</view>
          </view>
          <view class="pad-t-b-10 border-bottom-1">
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb flex width-20 color-999">
                <view class="carImg"
                  ><image :src="it.brand_Img" mode="widthFix"></image
                ></view>
                <view class="mr-13">车型:</view>
              </view>
              <view class="flex-jc-sb width-80 flex">
                <view class="flex-jc-sb color-333"
                  >{{ it.brand_Name }} {{ it.car_Type_Name }}
                  {{ it.configuration_Name }}</view
                >
              </view>
            </view>
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb width-20 color-999">外观内饰:</view>
              <view class="flex-jc-sb width-80 color-333">
                <view
                  :style="{ background: it.colour.outerColour.colorCoding }"
                  class="iconcolor"
                ></view>
                {{ it.colour.outerColour.color }} /{{
                  it.colour.inColour.color
                }}
                <view
                  v-if="it.colour.inColour.neiColor.length == 1"
                  :style="{ background: it.colour.inColour.colorCoding }"
                  class="iconcolor"
                ></view>
                <view v-else class="iconcolor"
                  ><view
                    class="iconcolor2"
                    v-for="(it, i) in it.colour.inColour.colorCoding.split('/')"
                    :key="i"
                    :style="{ background: it }"
                  ></view
                ></view>
              </view>
            </view>
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb width-20 color-999"></view>
              <view class="flex-jc-sb width-80 color-333"
                >首付{{ it.down_Payment_Money }}
                {{ it.installment_Monthly_Money }}/期 *{{
                  it.installment
                }}</view
              >
            </view>
            <view class="flex pad-t-b-10 font-26">
              <view class="flex-jc-sb width-20 color-999"></view>
              <view class="flex-jc-sb width-80">
                <text class="color-999">保证金：</text>
                <text class="font24 color-EB5C02"
                  >￥{{ it.earnest_Money }}</text
                >
              </view>
            </view>
          </view>

          <!-- 待付款   待收货  询价订单待确认-->
          <view class="" v-if="listType === 'msg'">
            <view class="mt-10 u-text-right"
              ><button @click="contactSeller(it, 1)" class="btn-bg-yellow">
                发送
              </button></view
            >
          </view>
          <view class="" v-else>
            <!-- 1成首付 -->
            <view class="">
              <!-- 待审核 -->
              <view class="flex mt-5 flex-jc-fe" v-if="it.status === 1">
                <view class="flex pad-t-b-10">
                  <view
                    class="btn-bg-yellow btnbg333"
                    @click.stop="$u.throttle(OrderCarDispose(it, 1), 1000)"
                    >未通过</view
                  >
                  <button class="btn-bg-yellow btnbg333">补充资料</button>
                  <button
                    class="btn-bg-yellow"
                    @click.stop="$u.throttle(OrderCarDispose(it, 0), 1000)"
                  >
                    审核通过
                  </button>
                </view>
              </view>
              <!-- 待补审 -->
              <view class="flex flex-jc-fe" v-else-if="it.status === 20">
                <view class="flex-jc-sb width-30 flex"></view>
                <view class="flex-jc-sb width-70 u-text-right pad-t-b-10">
                  <button
                    class="btn-bg-yellow btnbg333"
                    @click="$u.throttle(OrderCarDispose(it, 1), 1000)"
                  >
                    未通过
                  </button>
                  <button
                    class="btn-bg-yellow"
                    @click="$u.throttle(OrderCarDispose(it, 0), 1000)"
                  >
                    审核通过
                  </button>
                </view>
              </view>
              <!-- 待交车 -->
              <view class="flex flex-jc-fe" v-else-if="it.status === 35">
                <view class="flex pad-t-b-10">
                  <view
                    class="btn-bg-yellow"
                    @click.stop="contactSeller(it, 1)"
                  >
                    <i-icon
                      icon="iconxiaoxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    联系买家
                  </view>
                  <button class="btn-bg-yellow" @click.stop="call(it)">
                    <i-icon
                      icon="iconlianxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    致电买家
                  </button>
                  <button class="btn-bg-yellow">确认交车</button>
                </view>
              </view>
              <view
                class="flex mt-5"
                v-else-if="
                  it.status === 15 ||
                  it.status === 10 ||
                  it.status === 30 ||
                  it.status === 40 ||
                  it.status === 45
                "
              >
                <view class="flex-jc-sb width-40 line40 font-24"></view>
                <view class="flex-jc-sb flex pad-t-b-10 u-text-right">
                  <view
                    class="btn-bg-yellow"
                    @click.stop="contactSeller(it, 1)"
                  >
                    <i-icon
                      icon="iconxiaoxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    联系买家
                  </view>
                  <button class="btn-bg-yellow" @click.stop="call(it)">
                    <i-icon
                      icon="iconlianxi"
                      type="single"
                      class="middle"
                      size="32rpx"
                      color="#333"
                    ></i-icon>
                    致电买家
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="u-text-center pad-t-b-40" v-else>
      <image class="toastImg" src="@/static/img/images/tu.png" mode=""></image>
      <view class="color-999">暂无订单数据，快去下单吧</view>
    </view>
  </view>
</template>

<script>
import { AddMobileContactData } from '@/utils/common-api.js'
export default {
  data() {
    return {
      statusList: [
        { val: 0, lable: '待付款' },
        { val: 1, lable: '待确认' },
        { val: 2, lable: '待发货' },
        { val: 3, lable: '待收货' },
        { val: 4, lable: '已完成' },
        { val: 5, lable: '已取消' },
      ],
      RetailStatusList: [
        ['全部', '待到店', '已到店', '未成交', '已成交', '已取消'],
        ['全部', '待审核', '待补资料', '未通过', '待付款', '待交车'],
        ['全部', '待审核', '待补资料', '未通过', '待付款', '待交车'],
        ['全部', '待报价', '待确认', '完成'],
      ],
      LowPayList: [],

      findCarList: [
        { val: -1, name: '全部' },
        { val: 0, name: '待报价' },
        { val: 1, name: '待确认' },
        { val: 2, name: '完成' },
        { val: 3, name: '关闭' },
      ],
      tab: 0,
    }
  },
  props: ['oneTab', 'lastTab', 'datalist', 'listType'],
  watch: {},
  computed: {},
  created() {
    this.getLowPaystatus()
  },
  methods: {
    returnLowPayStatus(status) {
      let statusName = ''
      if (this.oneTab === 1) {
        this.LowPayList.forEach((it) => {
          if (it.val === status) {
            statusName = it.name
          }
        })
        return statusName
      } else {
        this.findCarList.forEach((it) => {
          if (it.val == status) {
            statusName = it.name
          }
        })
        return statusName
      }
    },
    // 获取低首付订单状态
    async getLowPaystatus() {
      try {
        const res = await this.$api.jsonData.getLowPaystatus()
        console.log(res)
        this.LowPayList = res.data
      } catch (e) {
        //TODO handle the exception
      }
    },
    // 删除订单
    handleOrder(val, it) {
      let value = {
        id: it.id,
        val: val,
      }
      console.log(value)
      this.$emit('handleOrder', value)
    },
    // 跳转到详情页面
    goCarOrderDetail(it) {
			console.log(this.oneTab, this.lastTab,'123123')
      console.log('tab', this.oneTab, this.lastTab)
      uni.navigateTo({
        url:
          '/pages_order/retailOrderDetail/retailOrder?id=' +
          it.id +
          '&oneTab=' +
          this.oneTab +
          '&lastTab=' +
          this.lastTab,
      })
      // this.$emit('gonext', 1);
    },
    // 去付款
    gopay(it) {
      console.log(it)
      uni.navigateTo({
        url:
          '/pages_order/payDeposit/payDeposit?id=' +
          it.id +
          '&deposit_amount=' +
          it.deposit_amount +
          '&time=' +
          it.endtime,
      })
    },
    // // 去寻车
    // goFindCar() {
    // 	uni.navigateTo({
    // 		url: '/pages_findCar/findtheCar/findtheCar'
    // 	});
    // },
    // 低首付订单处理
    async OrderCarDispose(it, type) {
      let _this = this
      //type 0、通过 1、未通过 2、补充资料
      // this.$emit('forcUpdata',true)
      uni.showLoading({
        title: '加载中',
      })
      let data = {
        oid: it.id,
        storeid: this.$store.state.userInfoDetail.store.storeId,
        type: type,
      }
      const res = await this.$api.carOrder.OrderCarDispose(data)
      try {
        uni.hideLoading()
        console.log(res)
        uni.showToast({
          title: '操作成功',
          duration: 2000,
          icon: 'success',
        })
        // setTimeout(function() {
        _this.$emit('forcUpdata', true)
        // }, 2000);
      } catch (err) {
        uni.hideLoading()
        console.log(err)
        uni.showToast({
          title: '请稍后重试',
          duration: 2000,
          icon: 'none',
        })
      }
    },
    // 拨打电话
    call(it) {
      // console.log(this.tab, it);
      AddMobileContactData(this.$store.state.userInfoDetail.store.storeId)
      uni.makePhoneCall({
        phoneNumber: it.mobile, //仅为示例
      })
    },

    //联系买家
    contactSeller(data, oneTab) {
      console.log(oneTab)
      if (this.listType === 'msg') {
        this.$store.commit('news/backRoom', {
          backFlag: true,
          tab: this.oneTab,
        })
      } else {
        AddMobileContactData(this.$store.state.userInfoDetail.store.storeId)
      }

      // 传和我聊天人的信息
      if (oneTab === 0) {
        this.$store.commit('news/setCardInfo', {
          imgSrc:
            'https://files.yzsheng.com/goodimg/brandimg/' +
            data.brand_id +
            '.png',
          name: data.car_type_name + ' ' + data.configuration_name,
          price: data.factoryprice,
          // labelPrige: '',
          type: 'resaleCar',
          goPage: '1', //客户端页面跳转参数
        })
        if (this.listType === 'msg') {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          this.$store.commit('news/createConversationActive', {
            user: data.nickname, //店铺名称
            img: data.headportrait, //店铺头像
            lastTime: '', //
            userId: data.uid, //店铺id
            conversationID: 'C2C' + data.uid,
          })
          uni.navigateTo({
            url:
              '/pages_news/contactSeller/contactSeller?user=' +
              data.nickname +
              '&pageId=' +
              data.id +
              '&tab=' +
              this.oneTab,
          })
        }
      } else if (oneTab === 1) {
        this.$store.commit('news/setCardInfo', {
          imgSrc: data.brand_Img,
          name: data.car_Type_Name + ' ' + data.configuration_Name,
          //   price: data.payable_amount,
          // labelPrige: '',
          type: 'resaleCar',
          goPage: '0', //客户端页面跳转参数
        })
        console.log(data)
        if (this.listType === 'msg') {
          this.$store.commit('news/createConversationActive', {
            user: data.trueName, //店铺名称
            img: data.headPortrait, //店铺头像
            lastTime: '', //
            userId: data.account_Id, //店铺id
            conversationID: 'C2C' + data.account_Id,
          })
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.navigateTo({
            url:
              '/pages_news/contactSeller/contactSeller?user=' +
              data.trueName +
              '&pageId=' +
              data.id +
              '&tab=' +
              this.oneTab,
          })
        }
      } else {
        this.$store.commit('news/setCardInfo', {
          imgSrc: data.brand_img,
          name: data.car_type_name + ' ' + data.configuration_name,
          // price: '',
          // labelPrige: '',
          type: 'resaleCar',
          goPage: '2', //客户端页面跳转参数
        })
        console.log(data)
        if (this.listType === 'msg') {
          this.$store.commit('news/createConversationActive', {
            user: data.truename, //店铺名称
            img: data.headportrait, //店铺头像
            lastTime: '', //
            userId: data.accountid, //店铺id
            conversationID: 'C2C' + data.accountid,
          })
          uni.navigateBack({
            delta: 1,
          })
        } else {
          uni.navigateTo({
            url:
              '/pages_news/contactSeller/contactSeller?user=' +
              data.truename +
              '&pageId=' +
              data.id +
              '&tab=' +
              this.oneTab,
          })
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.width-100 {
  width: 100%;
}
.listWrap {
  width: 95%;
  background: #fff !important;
  margin: 2.5%;
  border-radius: 10rpx;
  padding: 1% 20rpx;
  .title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin: auto 10rpx;
  }
  .middle {
    vertical-align: middle;
  }
  .line40 {
    line-height: 80rpx;
  }
  .icon-btn {
    width: 50%;
    // text-align: center;
    padding-left: 10%;
    line-height: 80rpx;
  }
}
.btn-bg-yellow:after {
  border: 0rpx;
}
.width250 {
  width: 260rpx;
}
.bgd0 {
  height: 62rpx;
  line-height: 62rpx;
  border: 1rpx solid #d0d0d0;
  background: #fff;
}

.headImg {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }
}
.iconcolor {
  width: 36rpx;
  height: 36rpx;
  // border-radius: 8rpx;
  display: inline-block;
  border: 2rpx solid #999;
  // line-height: 40rpx;
  margin: -8rpx 4rpx;
  overflow: hidden;
  border-radius: 50%;
}
.iconcolor2 {
  width: 36rpx;
  height: 36rpx;
}
.toastImg {
  width: 263rpx;
  height: 277rpx;
}
.pad-t-b-40 {
  padding: 80rpx 0px;
}
.scale {
  transform: rotate(180deg);
  vertical-align: middle;
  padding-top: 6rpx;
}
.carImg {
  width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  display: inline-block;
  // margin: 0rpx 10rpx;
  border-radius: 50%;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}
.mr-13 {
  margin-right: 26rpx !important;
}
.btnbg333 {
  color: #fbd220;
  background: #333333 !important;
  text-align: center;
}
.width-67 {
  width: 60%;
}
.width-33 {
  width: 40%;
}
</style>
